<template>
  <div class="container">
    <div class="header">
      <el-button
        type="primary"
        @click="dialogVisible = true"
        style="margin-bottom: 20px"
        >增加用户</el-button
      >

      <!-- 弹出框 -->

      <el-dialog
        title="添加服务信息"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
        :append-to-body="true"
      >
        <el-form label-width="80px">
          <el-form-item label="服务名称">
            <el-input v-model="name"></el-input>
          </el-form-item>

          <el-form-item label="服务类别">
            <el-select v-model="value" placeholder="请选择服务类别">
              <el-option
                v-for="item in options"
                :key="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="服务价格">
            <el-input v-model="price"></el-input>
          </el-form-item>

          <el-form-item label="服务介绍">
            <el-input v-model="desc"></el-input>
          </el-form-item>

          <el-form-item label="服务阶段">
            <el-time-select
              placeholder="起始时间"
              v-model="startTime"
              style="margin-right: 47px"
              :picker-options="{
                start: '09:00',

                step: '00:30',

                end: '18:00',
              }"
            >
            </el-time-select>

            <el-time-select
              placeholder="结束时间"
              v-model="endTime"
              :picker-options="{
                start: '09:00',

                step: '00:30',

                end: '18:00',

                minTime: startTime,
              }"
            >
            </el-time-select>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addBtn">确 定</el-button>

          <el-button @click="cancelHandle">取 消</el-button>
        </span>
      </el-dialog>

      <!-- 查询 -->

      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item>
          <el-select
            v-model="form.region"
            placeholder="请选择查询条件"
            class="query"
            style="width: 160px; margin-right: 20px"
          >
            <el-option label="服务名称" value="name"></el-option>

            <el-option label="服务类别" value="classify"></el-option>
          </el-select>

          <el-form-item>
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-button type="primary" class="referBtn" @click="searchHandle"
            >查询</el-button
          >

          <el-button type="primary" class="referBtn" @click="resetHandle"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格数据 -->

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="name" label="服务名称" align="center">
      </el-table-column>

      <el-table-column prop="classify" label="服务类别" align="center">
      </el-table-column>

      <el-table-column prop="price" label="服务价格" align="center">
      </el-table-column>

      <el-table-column prop="desc" label="服务介绍" width="300" align="left">
      </el-table-column>

      <el-table-column prop="periodTime" label="服务阶段" align="center">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            @click="updateHandle(scope.row)"
            type="primary"
            size="small"
            >修改</el-button
          >

          <el-button type="danger" size="small" @click="deleteHandle(scope.row)"
            >删除</el-button
          >
        </template>

        <!-- 修改 -->
        <el-dialog
          title="修改服务信息"
          :visible.sync="dialogUpdateVisible"
          width="40%"
          :before-close="handleClose"
          :append-to-body="true"
        >
          <el-form label-width="80px" :model="servicesArr">
            <el-form-item label="服务名称">
              <el-input v-model="servicesArr.name"></el-input>
            </el-form-item>

            <el-form-item label="服务类别">
              <el-select v-model="servicesArr.classify" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="服务价格">
              <el-input v-model="servicesArr.price"></el-input>
            </el-form-item>

            <el-form-item label="服务介绍">
              <el-input v-model="servicesArr.desc"></el-input>
            </el-form-item>

            <el-form-item label="服务阶段">
              <el-time-select
                placeholder="起始时间"
                v-model="newStartTime"
                style="margin-right: 47px"
                :picker-options="{
                  start: '09:00',

                  step: '00:30',

                  end: '18:00',
                }"
              >
              </el-time-select>

              <el-time-select
                placeholder="结束时间"
                v-model="newEndTime"
                :picker-options="{
                  start: '09:00',

                  step: '00:30',

                  end: '18:00',

                  minTime: newStartTime,
                }"
              >
              </el-time-select>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateBtn">确 定</el-button>

            <el-button @click="updateCancleHandle">取 消</el-button>
          </span>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisibleDelete"
          width="30%"
          :before-close="handleClose"
          :append-to-body="true"
        >
          <span>你确定要删除该服务吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogDeleteHandle"
              >确 定</el-button
            >
            <el-button @click="dialogVisibleDelete = false">取 消</el-button>
          </span>
        </el-dialog>
      </el-table-column>
    </el-table>

    <!-- 分页 -->

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>



<script>
import request from "../../utils/request";

export default {
  data() {
    return {
      tableData: [],

      startTime: "",

      endTime: "",

      newStartTime: "",

      newEndTime: "",

      form: {
        region: "", // 查询选择项

        name: "", // 查询内容
      },

      dialogVisible: false,

      dialogUpdateVisible: false,

      dialogVisibleDelete: false,
      dialogDelete: {},

      // 服务类型选项

      options: [
        {
          value: "送货服务",
        },

        {
          value: "安装服务",
        },

        {
          value: "装修服务",
        },

        {
          value: "清洗保养",
        },

        {
          value: "检测维修",
        },
      ],

      updataRow: {},

      name: "",

      value: "",

      classifyArr: [], // 所有服务种类

      price: null,

      desc: "",

      periodTime: "",

      currentPage: 0, // 当前显示页

      total: 0, // 总条数

      size: 0, // 每页显示条数

      totalPage: 0, // 总页数

      servicesArr: [],

      classify: "",
      shopManagerId: "", //门店管理员id

    };
  },

  mounted() {
    let obj = {
      typeId: "adminId",
      valueId: localStorage.getItem("shopAdminId"),
    };
    this.search(obj);
  },

  methods: {
    // 弹出框关闭

    handleClose(done) {
      this.$confirm("确认关闭？")

        .then((_) => {
          done();
        })

        .catch((_) => {});
    },

    // 确认增加

    addBtn() {
      if (
        this.name &&
        this.value &&
        this.price &&
        this.desc &&
        this.startTime &&
        this.endTime
      ) {

        for (let item of this.options) {
          this.classifyArr.push(item.value);
        }


        let obj = {
          name: this.name,

          classify: this.value,

          price: this.price,

          desc: this.desc,

          periodTime: this.startTime + "——" + this.endTime,
          adminId: localStorage.getItem("shopAdminId"),
        };

        request.post("/services", obj).then((res) => {
          console.log(res.rows);

          this.search({
            typeId: "adminId",
            valueId: localStorage.getItem("shopAdminId"),
          });

        });

        this.dialogVisible = false;

        this.name = "";

        this.value = "";

        this.price = "";

        this.desc = "";

        this.startTime = "";

        this.endTime = "";
      } else {
        alert("请输入完整内容！");
      }
    },

    // 增加取消

    cancelHandle() {
      this.dialogVisible = false;

      this.name = "";

      this.value = "";

      this.price = "";

      this.desc = "";

      this.startTime = "";

      this.endTime = "";
    },

    // 修改服务

    updateHandle(row) {
      this.updataRow = row;


      console.log(row);


      this.newStartTime = row.periodTime.slice(0, 5);

      this.newEndTime = row.periodTime.slice(7);

      this.servicesArr = row;

      this.dialogUpdateVisible = true;
    },

    // 修改确认按钮

    updateBtn() {
      let periodTime = this.newStartTime + "——" + this.newEndTime;

      this.servicesArr.periodTime = periodTime;

      this.newStartTime = "";

      this.newEndTime = "";

      let obj = {
        name: this.servicesArr.name,

        classify: this.servicesArr.classify,

        price: this.servicesArr.price,

        desc: this.servicesArr.desc,

        periodTime: this.servicesArr.periodTime,
        adminId: localStorage.getItem("shopAdminId"),
      };

      request.put(`/services/${this.updataRow._id}`, obj).then((res) => {
        this.search({
          typeId: "adminId",
          valueId: localStorage.getItem("shopAdminId"),
        });

      });

      this.dialogUpdateVisible = false;
    },

    // 修改取消

    updateCancleHandle() {

      this.search({
        typeId: "adminId",
        valueId: localStorage.getItem("shopAdminId"),
      });

      this.dialogUpdateVisible = false;
    },

    // 删除服务

    deleteHandle(row) {
      this.dialogVisibleDelete = true;
      this.dialogDelete = row;
    },
    // 确认删除
    dialogDeleteHandle() {
      this.dialogVisibleDelete = false;
      request.delete(`/services/${this.dialogDelete._id}`).then((res) => {
        this.search({
          typeId: "adminId",
          valueId: localStorage.getItem("shopAdminId"),
        });
      });
      this.$message({
        showClose: true,
        message: "该服务已经删除！",
        type: "warning",
      });
    },

    // 搜索方法

    search(obj) {
      request.get("/services/all", { params: obj }).then((res) => {
        this.tableData = res.rows;

        this.currentPage = parseInt(res.current);

        this.total = parseInt(res.total);

        this.size = parseInt(res.size);

        this.totalPage = parseInt(res.totalPage);
      });
    },

    // 查询选项

    filterTag(value, row) {
      return row.state === value;
    },

    // 搜索内容

    searchHandle() {
      let obj = {
        type: this.form.region,

        value: this.form.name,
        typeId: "adminId",
        valueId: localStorage.getItem("shopAdminId"),
      };

      this.search(obj);

      this.form.region = this.form.name = "";
    },

    // 重置按钮

    resetHandle() {

      this.search({
        typeId: "adminId",
        valueId: localStorage.getItem("shopAdminId"),
      });

      this.form.region = this.form.name = "";
    },

    // 显示条数更换

    handleSizeChange(val) {

      let obj = {
        size: val,
        typeId: "adminId",
        valueId: localStorage.getItem("shopAdminId"),
      };

      this.search(obj);
    },

    // 每页点击更换

    handleCurrentChange(val) {

      let obj = {
        current: val,
        typeId: "adminId",
        valueId: localStorage.getItem("shopAdminId"),
      };

      this.search(obj);
    },
  },
};
</script>



<style>
.container {
  padding: 50px;
}

.header {
  display: flex;

  justify-content: space-between;
}

.right {
  text-align: center;
}

.block {
  margin-top: 20px;
}
</style>
